<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>flex学习</title>
  </head>
  <style>
    html,
    body,
    div {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 100%;
      height: 1000px;
      border: 1px solid red;
      display: flex;
      gap: 10px;
      justify-content: space-between;
      align-items: center;
      flex-wrap: nowrap;
    }

    .item {
      width: 100px;
      height: 100px;
      /* flex-grow: 1; */
      flex-shrink: 1;
    }

    .item-1 {
      background-color: aqua;
      justify-self: end;
      /* flex-grow 
        属性用于设置或检索弹性盒模型和扩展比例，取值一个数字，规定项目相对于其他灵活的项目进行扩展的量，默认值是0
      */
      /* flex-grow: 2; */
      /* flex-shrink
        flex-shrink属性用于设置或检索弹性盒模型中项目缩小时所占空间的比例，取值是一个数字，默认值为1，即如果空间不足，该项目将缩小。  
       */
       flex-shrink: 2;
       /* flex-basis
       flex-basis属性用于设置或检索弹性盒模型中项目的初始大小，取值可以是长度（宽度），也可以是百分比。
       如果未设置该属性，则默认值为"auto"，表示项目本身的大小。
       */
       /* flex-basis: 300px; */
       /* flex
       flex属性是flex-grow, flex-shrink 和 flex-basis的简写属性，默认值为0 1 auto。后两个值可选。
       该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
       建议优先使用这个属性，而不是单独使用那些独立的属性，因为单独使用会触发Flexbox布局，而flex属性不会。
       */
       /* flex: 1 2 300px; */
       /* order
       order属性用于设置或检索弹性盒模型中项目的排列顺序，取值是一个整数，默认值为0。
       */
       /* order: 2; */
       /* align-self
       align-self属性用于设置或检索弹性盒模型中项目的对齐方式，可覆盖align-items属性，取值有：auto  
        */
    }
    .item-2 {
      background-color: blue;
    }
    .item-3 {
      background-color: chartreuse;
    }
    .item-4 {
      background-color: darkcyan;
    }
    .item-5 {
      background-color: blueviolet;
    }
    .item-6 {
      background-color: burlywood;
    }
    .item-7 {
      background-color: crimson;
    }
    .item-8 {
      background-color: chocolate;
    }
    .item-9 {
      background-color: darkblue;
    }
  </style>

  <body>
    <div class="box">
      <div class="item item-1">1</div>
      <div class="item item-2">2</div>
      <div class="item item-3">3</div>
      <div class="item item-4">4</div>
      <div class="item item-5">5</div>
      <div class="item item-6">6</div>
      <div class="item item-7">7</div>
      <div class="item item-8">8</div>
      <div class="item item-9">9</div>
    </div>
  </body>
</html>
